<template>
  <div id="businessChosserContainer">
    <el-row :gutter="25">
      <el-col :span="sysMapSpan">
        <template>
          <el-input v-model="sysMapKey" placeholder="请输入关键字" icon="search" @change="sysMapKeyChangeAction"></el-input>

          <el-table :data="sysMapData" @selection-change="handleSysMapSelectionChange" height="400">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="name" show-overflow-tooltip label="业务拓扑名称">
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from 'api/topo'
export default {
  name: 'businessChosser',
  data: function() {
    return {
      sysMapData: [],
      base_sysMapData: [],
      selectSysMaps: [],

      sysMapKey: '',
      sysMapSpan: 25
    };
  },
  methods: {
    handleSysMapSelectionChange(val) {
      if (val.length > 0) {
        this.selectSysMaps = val;
      } else {
        this.selectSysMaps = [];
      }
    },
    sysMapKeyChangeAction() {
      var filterData = [];
      var self = this;
      if (this.sysMapKey == '') {
        this.sysMapData = this.base_sysMapData;
      } else {
        this.sysMapData = this.base_sysMapData.filter(function(v) {
          if (("" + v["name"] + "").toLowerCase().indexOf(self.sysMapKey.toLowerCase()) >= 0) {
            return true;
          }
          return false;
        });
      }
    },
  },
  mounted: function() {
    api.listMapByType(1).then((response) => {
      this.sysMapData = response.data;
      this.base_sysMapData = response.data;
    }).catch((err) => {
      console.error(err);
    });
  }
}
</script>


<style >
#businessChosserContainer .el-table td,
#businessChosserContainer .el-table th.is-leaf {
  padding: 0;
}
</style>
